<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入要查看的地区" suffix-icon="el-icon-search" v-model="search.title"
						@keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData" size="medium">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>

		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID">
				</el-table-column>
				<el-table-column prop="enable" label="启用情况">
					<template #default="scope">
						<span v-if="scope.row.enable == 0">
							<el-tag size="mini" type="info">禁用</el-tag>
						</span>
						<span v-if="scope.row.enable == 1">
							<el-tag size="mini">启用</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="stay" label="保持屏保">
					<template #default="scope">
						<span v-if="scope.row.stay == 0">
							<el-tag size="mini" type="info">不保持</el-tag>
						</span>
						<span v-if="scope.row.stay == 1">
							<el-tag size="mini">保持</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="interval_time" label="屏保切换时间">
				</el-table-column>
				<el-table-column prop="push_type" label="推送类型">
					<template #default="scope">
						<span v-if="scope.row.push_type == 1">
							<el-tag size="mini" type="info">全部设备推送</el-tag>
						</span>
						<span v-if="scope.row.push_type == 2">
							<el-tag size="mini">按地址推送</el-tag>
						</span>
						<span v-if="scope.row.push_type == 3">
							<el-tag size="mini" type="info">自定义推送</el-tag>
						</span>
						<span v-if="scope.row.push_type == 4">
							<el-tag size="mini">按地区推送</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="screensaver.images" label="屏保图片">
					<template #default="scope">
						<div v-if="scope.row.screensaver">
							<div style="display: flex;flex-wrap: wrap;">
								<div v-for="(item, index) in scope.row.screensaver.images" :key="index">
									<div style="margin: 0 20px;">
										<el-popover placement="left" title="" trigger="click">
											<img :src="item" style="max-width:800px; max-height:800px;" />
											<template #reference>
												<img :src="item" style="max-width:50px;max-height:50px;">
											</template>
										</el-popover>
									</div>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="screensaver.title" label="屏保名称">
				</el-table-column>
				<el-table-column prop="display_time" label="屏保时间">
				</el-table-column>


			</el-table>
			<page-component @pageChanged="onPageChanged"></page-component>
		</div>

	</div>

	<!--  mobile  -->
	<!-- <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求"
		element-loading-spinner="el-icon-loading">
		<div class="mobile-search-box">
			<el-input class="w-ipt" placeholder="请输入要查看的地区" suffix-icon="el-icon-search" v-model="search.area"
				@keydown.enter="getSearchData" size="medium">
			</el-input>
			<el-button @click="getSearchData" size="medium">搜索</el-button>
		</div>
		<div class="moblie-table-box">
			<el-table :data="data" stripe row-key="id" :tree-props="{children: 'children'}" :row-style="rowStyle"
				:header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
				<el-table-column prop="title" label="省份 (社区)">
					<template #default="scope">
						<span>{{ scope.row.title }}</span>
						<span :style="{'color' : (scope.row.is_community == '1' ? 'green' : 'red')}"
							style="margin-left: 10px;">({{ scope.row.is_community == "1" ? "是" : "否" }})</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div> -->
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'

	export default {
		mixins: [mixin],
		data() {
			return {
				search: { // 搜索
					title: '',
				},
			}
		},

		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						title: self.search.title,
					}
					self.addPageInfo(params)
					let res = await API.getPushRecord(params.pageNumber, params.pageSize, params.title)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},

		}
	}
</script>

<style scoped lang="scss">

</style>
